<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手租赁交易管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1e1e1e;
            color: #fff;
            margin: 0;
            padding: 0;
            display: flex;
        }

        #sidebar {
            width: 200px;
            background-color: #2d2d2d;
            padding: 20px;
        }

        #sidebar button {
            display: block;
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #444;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        #sidebar button:hover {
            background-color: #555;
        }

        #content {
            flex: 1;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #444;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #333;
        }

        form {
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 10px;
            margin-right: 10px;
        }

        button {
            padding: 10px 20px;
            background-color: #444;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #555;
        }

        #chart {
            width: 100%;
            height: 300px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
<div id="sidebar">
    <button onclick="showPage('home')">首页</button>
    <button onclick="showPage('items')">物品管理</button>
    <button onclick="showPage('users')">用户管理</button>
    <button onclick="showPage('orders')">订单管理</button>
    <button onclick="showPage('categories')">分类管理</button>
</div>
<div id="content">
    <div id="home" style="display: none;">
        <h2>首页</h2>
        <div id="chart"></div>
    </div>
    <div id="items" style="display: none;">
        <h2>物品管理</h2>
        <form id="itemForm">
            <input type="text" id="itemName" placeholder="物品名称">
            <input type="text" id="itemPrice" placeholder="物品价格">
            <button onclick="addItem()">添加</button>
        </form>
        <table id="itemTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>物品名称</th>
                <th>物品价格</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="users" style="display: none;">
        <h2>用户管理</h2>
        <form id="userForm">
            <input type="text" id="userName" placeholder="用户姓名">
            <input type="text" id="userPhone" placeholder="用户电话">
            <button onclick="addUser()">添加</button>
        </form>
        <table id="userTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户姓名</th>
                <th>用户电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="orders" style="display: none;">
        <h2>订单管理</h2>
        <form id="orderForm">
            <input type="text" id="orderItem" placeholder="订单物品">
            <input type="text" id="orderUser" placeholder="订单用户">
            <button onclick="addOrder()">添加</button>
        </form>
        <table id="orderTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>订单物品</th>
                <th>订单用户</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="categories" style="display: none;">
        <h2>分类管理</h2>
        <form id="categoryForm">
            <input type="text" id="categoryName" placeholder="分类名称">
            <button onclick="addCategory()">添加</button>
        </form>
        <table id="categoryTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<script>
    let items = JSON.parse(localStorage.getItem('items')) || [
        { id: 1, name: '自行车', price: 50 },
        { id: 2, name: '篮球', price: 30 },
        { id: 3, name: '吉他', price: 200 },
        { id: 4, name: '书本', price: 10 },
        { id: 5, name: '电脑', price: 500 },
        { id: 6, name: '相机', price: 300 },
        { id: 7, name: '滑板', price: 80 },
        { id: 8, name: '帐篷', price: 150 },
        { id: 9, name: '耳机', price: 40 },
        { id: 10, name: '打印机', price: 120 }
    ];
    let users = JSON.parse(localStorage.getItem('users')) || [
        { id: 1, name: '张三', phone: '13800138000' },
        { id: 2, name: '李四', phone: '13900139000' },
        { id: 3, name: '王五', phone: '13700137000' },
        { id: 4, name: '赵六', phone: '13600136000' },
        { id: 5, name: '孙七', phone: '13500135000' },
        { id: 6, name: '周八', phone: '13400134000' },
        { id: 7, name: '吴九', phone: '13300133000' },
        { id: 8, name: '郑十', phone: '13200132000' },
        { id: 9, name: '王十一', phone: '13100131000' },
        { id: 10, name: '李十二', phone: '13000130000' }
    ];
    let orders = JSON.parse(localStorage.getItem('orders')) || [
        { id: 1, item: '自行车', user: '张三' },
        { id: 2, item: '篮球', user: '李四' },
        { id: 3, item: '吉他', user: '王五' },
        { id: 4, item: '书本', user: '赵六' },
        { id: 5, item: '电脑', user: '孙七' },
        { id: 6, item: '相机', user: '周八' },
        { id: 7, item: '滑板', user: '吴九' },
        { id: 8, item: '帐篷', user: '郑十' },
        { id: 9, item: '耳机', user: '王十一' },
        { id: 10, item: '打印机', user: '李十二' }
    ];
    let categories = JSON.parse(localStorage.getItem('categories')) || [
        { id: 1, name: '交通工具' },
        { id: 2, name: '体育用品' },
        { id: 3, name: '乐器' },
        { id: 4, name: '学习用品' },
        { id: 5, name: '电子产品' },
        { id: 6, name: '摄影器材' },
        { id: 7, name: '运动器材' },
        { id: 8, name: '户外用品' },
        { id: 9, name: '音频设备' },
        { id: 10, name: '办公设备' }
    ];

    function showPage(page) {
        const pages = ['home', 'items', 'users', 'orders', 'categories'];
        pages.forEach(p => {
            document.getElementById(p).style.display = 'none';
        });
        document.getElementById(page).style.display = 'block';
        if (page === 'home') {
            drawChart();
        } else if (page === 'items') {
            renderItems();
        } else if (page === 'users') {
            renderUsers();
        } else if (page === 'orders') {
            renderOrders();
        } else if (page === 'categories') {
            renderCategories();
        }
    }

    function drawChart() {
        const ctx = document.getElementById('chart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['物品数量', '用户数量', '订单数量', '分类数量'],
                datasets: [{
                    label: '统计数据',
                    data: [items.length, users.length, orders.length, categories.length],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 205, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    function renderItems() {
        const tableBody = document.getElementById('itemTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';
        items.forEach(item => {
            const row = tableBody.insertRow();
            const idCell = row.insertCell(0);
            const nameCell = row.insertCell(1);
            const priceCell = row.insertCell(2);
            const actionCell = row.insertCell(3);
            idCell.textContent = item.id;
            nameCell.textContent = item.name;
            priceCell.textContent = item.price;
            actionCell.innerHTML = `<button onclick="editItem(${item.id})">编辑</button> <button onclick="deleteItem(${item.id})">删除</button>`;
        });
        localStorage.setItem('items', JSON.stringify(items));
    }

    function addItem() {
        const name = document.getElementById('itemName').value;
        const price = document.getElementById('itemPrice').value;
        if (name && price) {
            const newId = items.length > 0 ? items[items.length - 1].id + 1 : 1;
            items.push({ id: newId, name, price: parseFloat(price) });
            renderItems();
            document.getElementById('itemName').value = '';
            document.getElementById('itemPrice').value = '';
        }
    }

    function editItem(id) {
        const item = items.find(i => i.id === id);
        if (item) {
            const newName = prompt('请输入新的物品名称', item.name);
            const newPrice = prompt('请输入新的物品价格', item.price);
            if (newName && newPrice) {
                item.name = newName;
                item.price = parseFloat(newPrice);
                renderItems();
            }
        }
    }

    function deleteItem(id) {
        items = items.filter(i => i.id !== id);
        renderItems();
    }

    function renderUsers() {
        const tableBody = document.getElementById('userTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';
        users.forEach(user => {
            const row = tableBody.insertRow();
            const idCell = row.insertCell(0);
            const nameCell = row.insertCell(1);
            const phoneCell = row.insertCell(2);
            const actionCell = row.insertCell(3);
            idCell.textContent = user.id;
            nameCell.textContent = user.name;
            phoneCell.textContent = user.phone;
            actionCell.innerHTML = `<button onclick="editUser(${user.id})">编辑</button> <button onclick="deleteUser(${user.id})">删除</button>`;
        });
        localStorage.setItem('users', JSON.stringify(users));
    }

    function addUser() {
        const name = document.getElementById('userName').value;
        const phone = document.getElementById('userPhone').value;
        if (name && phone) {
            const newId = users.length > 0 ? users[users.length - 1].id + 1 : 1;
            users.push({ id: newId, name, phone });
            renderUsers();
            document.getElementById('userName').value = '';
            document.getElementById('userPhone').value = '';
        }
    }

    function editUser(id) {
        const user = users.find(u => u.id === id);
        if (user) {
            const newName = prompt('请输入新的用户姓名', user.name);
            const newPhone = prompt('请输入新的用户电话', user.phone);
            if (newName && newPhone) {
                user.name = newName;
                user.phone = newPhone;
                renderUsers();
            }
        }
    }

    function deleteUser(id) {
        users = users.filter(u => u.id !== id);
        renderUsers();
    }

    function renderOrders() {
        const tableBody = document.getElementById('orderTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';
        orders.forEach(order => {
            const row = tableBody.insertRow();
            const idCell = row.insertCell(0);
            const itemCell = row.insertCell(1);
            const userCell = row.insertCell(2);
            const actionCell = row.insertCell(3);
            idCell.textContent = order.id;
            itemCell.textContent = order.item;
            userCell.textContent = order.user;
            actionCell.innerHTML = `<button onclick="editOrder(${order.id})">编辑</button> <button onclick="deleteOrder(${order.id})">删除</button>`;
        });
        localStorage.setItem('orders', JSON.stringify(orders));
    }

    function addOrder() {
        const item = document.getElementById('orderItem').value;
        const user = document.getElementById('orderUser').value;
        if (item && user) {
            const newId = orders.length > 0 ? orders[orders.length - 1].id + 1 : 1;
            orders.push({ id: newId, item, user });
            renderOrders();
            document.getElementById('orderItem').value = '';
            document.getElementById('orderUser').value = '';
        }
    }

    function editOrder(id) {
        const order = orders.find(o => o.id === id);
        if (order) {
            const newItem = prompt('请输入新的订单物品', order.item);
            const newUser = prompt('请输入新的订单用户', order.user);
            if (newItem && newUser) {
                order.item = newItem;
                order.user = newUser;
                renderOrders();
            }
        }
    }

    function deleteOrder(id) {
        orders = orders.filter(o => o.id !== id);
        renderOrders();
    }

    function renderCategories() {
        const tableBody = document.getElementById('categoryTable').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';
        categories.forEach(category => {
            const row = tableBody.insertRow();
            const idCell = row.insertCell(0);
            const nameCell = row.insertCell(1);
            const actionCell = row.insertCell(2);
            idCell.textContent = category.id;
            nameCell.textContent = category.name;
            actionCell.innerHTML = `<button onclick="editCategory(${category.id})">编辑</button> <button onclick="deleteCategory(${category.id})">删除</button>`;
        });
        localStorage.setItem('categories', JSON.stringify(categories));
    }

    function addCategory() {
        const name = document.getElementById('categoryName').value;
        if (name) {
            const newId = categories.length > 0 ? categories[categories.length - 1].id + 1 : 1;
            categories.push({ id: newId, name });
            renderCategories();
            document.getElementById('categoryName').value = '';
        }
    }

    function editCategory(id) {
        const category = categories.find(c => c.id === id);
        if (category) {
            const newName = prompt('请输入新的分类名称', category.name);
            if (newName) {
                category.name = newName;
                renderCategories();
            }
        }
    }

    function deleteCategory(id) {
        categories = categories.filter(c => c.id !== id);
        renderCategories();
    }

    // 初始显示首页
    showPage('home');
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>
